<template>
    <div class="origin">
        <van-cell>
            <!-- 使用 right-icon 插槽来自定义右侧图标 -->
            <form action="/">
                <van-search v-model="value" show-action placeholder="塔利班与美国交换囚犯换回高级成员" />
            </form>
            <!-- <template #right-icon>
                <van-icon name="search" class="search-icon" />
            </template> -->
        </van-cell>


        <van-cell-group v-for="item in list" :key="item.id">
            <van-cell title="单元格" :value="item.num">
                <template #title>
                    <div class="custom-title"><span>{{item.id}}</span>.{{item.text}}
                        <van-icon name="fire" color="red" v-if="item.id<=3" />
                    </div>
                </template>
                <template #right-icon>
                    <van-icon name="hot" color="red" v-if="item.id<=3" />
                </template>
            </van-cell>


        </van-cell-group>
    </div>

</template>


<script setup>
import { onMounted, reactive } from 'vue';
import { getsearch } from '../api/getlogin'

const list = reactive([]);

onMounted(async () => {
    const { data: res } = await getsearch();
    // console.log(res);
    res.forEach(e => {
        list.push(e)
    });
})



</script>
 


<style>
.van-cell__title {
    white-space: nowrap;
}
</style>